<template>
    <div class="top">
        <icon-button @click.native="topCreateSlide" name="#icon-tianjia" label="新建幻灯片"></icon-button>
        <icon-button @click.native="play" name="#icon-bofang" label="播放"></icon-button>
      <div class="bar">
        <icon-button @click.native="textSelector" name="#icon-icon-1" label="文本"></icon-button>
        <icon-button @click.native="chartSelector" name="#icon-duozhutu" label="图表"></icon-button>
        <icon-button @click.native="addItem('BASETABLE')" name="#icon-tubiao2" label="表格"></icon-button>
        <icon-button @click.native="addImage" name="#icon-tupian1" label="图片"></icon-button>
        <icon-button @click.native="setting" name="#icon-shezhi" label="背景"></icon-button>
        <input ref="upload" style="display: none" type="file" @change="changeImage" class="upload" accept=".jpeg,.jpg,.png">
        <!-- <icon-button @click.native="click" name="#icon-yinle" label="音频"></icon-button>
        <icon-button @click.native="video" name="#icon-shipin" label="视频"></icon-button> -->
      </div>
      <text-selector ref="textSelector"></text-selector>
      <chart-selector ref="chartSelector"></chart-selector>
      <background ref="background"></background>
    </div>
</template>
<script>
import Background from '@/components/Edit/Background.vue'
import TextSelector from '@/components/Select/TextSelector.vue'
import ChartSelector from '@/components/Select/ChartSelector.vue'
import IconButton from '@/components/IconButton.vue'
/* const fs = require('fs')
const { dialog } = require('electron').remote
const { nativeImage, ipcRenderer } = require('electron') */

export default {
  mounted () {
  },
  data () {
    return {
      chartDrawer: false,
      currentCom: 'bar',
      url: 'image/aaa.png'
    }
  },
  computed: {
    maxNum () {
      return this.$store.state.maxNum
    }
  },
  methods: {
    setting () {
      this.$refs.background.drawer = true
    },
    textSelector () {
      this.$refs.textSelector.drawer = true
    },
    chartSelector () {
      this.$refs.chartSelector.drawer = true
    },
    /* save () {
      var json = JSON.stringify(this.$store.getters.sortLayout, null, '\t')
      var options = {
        title: '保存',
        filters: [
          { name: 'txt', extensions: ['json'] }
        ]
      }
      dialog.showSaveDialog(options, (filename) => {
        console.log(filename)
        fs.writeFile(filename, json, (err) => {
          if (!err) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          } else { console.log(err) }
        })
      }).catch(function (err) {
        console.log(err)
      })
    }, */
    addItem (itemName) {
      this.$store.commit('addItem', { itemName })
    },
    addImage () {
      this.$refs.upload.click()
    },
    changeImage () {
      const file = this.$refs.upload.files[0]
      const reader = new FileReader()
      reader.addEventListener('load', () => {
        // convert image file to base64 string
         this.$store.commit('addItem', { itemName: 'BASEIMAGE', src: reader.result })
      }, false)
      if (file) {
        reader.readAsDataURL(file)
      }
    },
    /* addImage () {
      var options = {
        title: '图片',
        properties: ['openFile'],
        filters: [
          { name: 'Images', extensions: ['jpg', 'jpeg', 'png'] }
        ]
      }
      dialog.showOpenDialog(options).then(result => {
        if (!result.canceled) {
          console.log(result)
          console.log(result.filePaths)
          var logo = nativeImage.createFromPath(result.filePaths[0])
          console.log(logo.getSize())
          console.log(logo.toDataURL())
          this.$store.commit('addItem', { itemName: 'BASEIMAGE', src: logo.toDataURL() })
        }
      }).catch(err => {
        console.log(err)
      })
    }, */
    play () {
      this.$router.push('/play')
    },
    updateRatio () {
      this.$store.commit('updateRatio', 16 / 9)
    },
    topCreateSlide () {
      this.$store.commit('addSlide')
      this.$store.commit('addMaxNum')
      this.$store.commit('updateActiveLayoutIndex', this.$store.state.maxNum - 1)
    }
  },
  watch: {
  },
  components: {
    Background,
    ChartSelector,
    TextSelector,
    IconButton
  }
}
</script>

<style scoped>
  .top {
    background-color:rgb(230,230,230);
    display: grid;
    grid-template-rows:1fr;
    grid-template-columns: 250px 150px 1fr;
    justify-items: center;
    align-items: center;
  }
  .bar {
    height:100%;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center
  }
  .box {
    background-color: red;
    width:100px;
    height:100%
  }
</style>

<style>
  .el-drawer /deep/ #el-drawer__title{
    margin-bottom: 0px;
    padding: 0px
  }
</style>
